<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>GEarthExtensions Samples - Creating Vantage Point Views</title>
  <script src="http://www.google.com/jsapi?key=ABQIAAAAsc0UQXoo2BnAJLhtpWCJFBTgHOxFyKCf35LCvsI_n4URElrkIhS9MkSlm_0NZWgrKFkOsnd5rEK0Lg" type="text/javascript"></script>
  <script src="../dist/extensions.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */

var master_ge = null;
var master_gex = null;

var puppet_ge = null;
var puppet_gex = null;

var cameraPlacemark = null;
var lookAtPlacemark = null;

google.load('earth', '1');

google.setOnLoadCallback(function() {
  // Create master instance.
  google.earth.createInstance('master_map3d', function(pluginInstance) {
    master_ge = pluginInstance;
    master_ge.getWindow().setVisibility(true);
    
    master_gex = new GEarthExtensions(master_ge);
    
    master_gex.util.lookAt([7.6149, 1.0725]);
    
    // Create camera representative placemark.
    cameraPlacemark = master_gex.dom.addPointPlacemark({
      point: [7.614961624145508, 1.072503566741943, 10],
      name: 'Camera (drag me)'
    });
    
    cameraPlacemark.getGeometry().setExtrude(true);
    master_gex.edit.makeDraggable(cameraPlacemark, {
      bounce: false,
      dropCallback: resetCamera
    });
    
    // Create look at representative placemark.
    lookAtPlacemark = master_gex.dom.addPointPlacemark({
      point: [7.615055084228516, 1.076048970222473, 10],
      name: 'Look at (drag me)'
    });
    
    lookAtPlacemark.getGeometry().setExtrude(true);
    master_gex.edit.makeDraggable(lookAtPlacemark, {
      bounce: false,
      dropCallback: resetCamera
    });
    
    if (puppet_ge && master_ge)
      resetCamera();
  }, function() {});
  
  // Create puppet instance.
  google.earth.createInstance('puppet_map3d', function(pluginInstance) {
    puppet_ge = pluginInstance;
    puppet_ge.getWindow().setVisibility(true);
    puppet_ge.getOptions().setMouseNavigationEnabled(false);
    
    puppet_gex = new GEarthExtensions(puppet_ge);
    
    if (puppet_ge && master_ge)
      resetCamera();
  }, function() {});
});

function resetCamera() {
  var cameraPoint = new geo.Point(
      cameraPlacemark.getGeometry().getLatitude(),
      cameraPlacemark.getGeometry().getLongitude(),
      puppet_ge.getGlobe().getGroundAltitude(
        cameraPlacemark.getGeometry().getLatitude(),
        cameraPlacemark.getGeometry().getLongitude()) + cameraPlacemark.getGeometry().getAltitude(),
      geo.ALTITUDE_ABSOLUTE);
  
  var lookAtPoint = new geo.Point(
      lookAtPlacemark.getGeometry().getLatitude(),
      lookAtPlacemark.getGeometry().getLongitude(),
      puppet_ge.getGlobe().getGroundAltitude(
         lookAtPlacemark.getGeometry().getLatitude(),
         lookAtPlacemark.getGeometry().getLongitude()) + lookAtPlacemark.getGeometry().getAltitude(),
      geo.ALTITUDE_ABSOLUTE);
  
  var vantageView = puppet_gex.view.createVantageView(cameraPoint, lookAtPoint);
  puppet_ge.getView().setAbstractView(vantageView);
}

/* ]]> */
</script>
</head>
<body>
  <table width="100%">
    <tr>
      <th>Master</th>
      <th>Puppet</th>
    </tr>
    <tr>
      <td><div id="master_map3d" style="width: 500px; height: 500px;"></td>
      <td><div id="puppet_map3d" style="width: 500px; height: 500px;"></td>
    </tr>
  </table>
</body>
</html>
